<template>
  <div class="main-layout">
    <!-- 主内容区域 -->
    <div class="main-content">
      <router-view />
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tabbar-container">
      <van-tabbar v-model="activeTab" route class="tabbar-content">
        <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item to="/circulation" icon="exchange">流通</van-tabbar-item>
        <van-tabbar-item to="/active" icon="gift-o">活动</van-tabbar-item>
        <van-tabbar-item to="/mine" icon="user-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activeTab = ref(0)

// 根据当前路由设置激活的标签页
watch(() => route.path, (path) => {
  if (path.startsWith('/home')) {
    activeTab.value = 0
  } else if (path.startsWith('/circulation')) {
    activeTab.value = 1
  } else if (path.startsWith('/active')) {
    activeTab.value = 2
  } else if (path.startsWith('/mine')) {
    activeTab.value = 3
  }
}, { immediate: true })
</script>

<style scoped>
.main-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--background-color);
}

.main-content {
  flex: 1;
  padding-bottom: 50px; /* 为底部导航栏留出空间 */
}

/* 底部导航栏容器 */
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* 底部导航栏内容 */
.tabbar-content {
  max-width: var(--max-content-width);
  margin: 0 auto;
  width: 100%;
}

/* 覆盖Vant Tabbar的默认样式 */
:deep(.van-tabbar) {
  max-width: var(--max-content-width);
  margin: 0 auto;
  width: 100%;
}
</style>
